<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=0;" >
<title>一生平安-登录页面</title>
<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile-1.0b1.min.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/jszx-scroll.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/jszx-bar.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/dynamicPic.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/mobile.css" />
	<link type="text/css" href="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile.datebox.min.css" rel="stylesheet" />
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery-1.6.4.min.js"></script>
	<script>
	$(document).bind("mobileinit", function(){
		$.mobile.loadingMessage=false;
		$.mobile.selectmenu.prototype.options.nativeMenu = false;
		$.mobile.defaultPageTransition="none";
		$.mobile.listview.prototype.options.filterPlaceholder="";
	});
	</script>
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile-1.0b1.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/mobile-common.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/dynamicPic.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/mobile.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile.datebox.js"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile.datebox.i8n.CHN-S.utf8.js"></script>
</head>
<body>
	<div data-role="page" id="mobile-login-page" class="page-div-style" style="overflow:hidden;">
		<script>
			$('#mobile-login-page').live('pagebeforeshow',function(){
				//显示头部栏
				initHeader($("#mobileLoginHeader"),"login");
				
				//显示功能列表的头部标题名称
				$("#mobileLoginHeader").find("[name='mobileHeaderTitle']").text("登录");
				
				//清空所有输入框
				$("#mobile-login-page").find("input[type='text']").val("");
				$("#mobile-login-page").find("input[type='password']").val("");
			});
			
			var LoginObj = new Object();
			
			//提醒效果
			LoginObj.errorMsgShow = function(msg){
				$("#mobileLogin_msg").html(msg);
				jQuery.fx.interval = 5;
				$("#mobileLogin_msg").fadeIn('slow',function(){
					$("#mobileLogin_msg").fadeOut(1000);
				});
			}
			
			//验证登录
			function checkLogin(){
				//用户名
				var loginName = $.trim($("#mobile-login-page").find("#loginName").val());
				if(loginName.length > 20 || loginName.length == 0){
					LoginObj.errorMsgShow("用户名长度： 0~20位 ！");
					return false;
				}
				
				//密码
				var userPwd = $.trim($("#mobile-login-page").find("#userPwd").val());
				if(userPwd.length > 20 || userPwd.length < 4){
					LoginObj.errorMsgShow("密码长度： 4~20位 ！");
					return false;
				}
				return true;
			}
			
			$("#mobile-login-page").live("pageshow",function(){
				$("#mobile-login-contentUserDiv")[0].style.top = (window.innerHeight)/4+"px";
				
				$("#mobileLoginScroller")[0].style.height = window.innerHeight +"px";
				
				//登录
				$("#mobileLoginBtn").addEventListener("quickClick",function(){
					$("#mobile-login-page").find("input[type='text']").blur();
					$("#mobile-login-page").find("input[type='password']").blur();
					
					doLogin();
				});
				
				//注册
				$("#mobileRegisterBtn").addEventListener("quickClick",function(){
					$("#mobile-login-page").find("input[type='text']").blur();
					$("#mobile-login-page").find("input[type='password']").blur();
					window.location.href = "${ctx}/mobile/register.html";
				});
				
				//忘记密码
				$("#mobileLosePwdBtn").addEventListener("quickClick",function(){
					$("#mobile-login-page").find("input[type='text']").blur();
					$("#mobile-login-page").find("input[type='password']").blur();
					//doRegister();
				});
			});
			
			//登录用户
			function doLogin(){
				//加载等待
				showLoadPage();
				
				if(!checkLogin()){
					//结束等待
					hideLoadPage();
					return false;
				}
				$("#mobileLogin_msg").fadeOut(1000);
				$("#form").submit();
			}
			
			//选择 checkbox
			$("#mobile-login-page").find("#td_checkbox .ui-checkbox").addEventListener("quickClick",function(){
				var $boxDiv = $("#mobile-login-page").find("#td_checkbox .ui-checkbox");
				
				var checkAgree = $boxDiv.find("#keepPwd").prop("checked");
				if(checkAgree){
					uncheckBox($boxDiv,$boxDiv.find("#keepPwd"));
				}else{
					checkBox($boxDiv,$boxDiv.find("#keepPwd"));
				}
			});
			
			//加载等待页面
			function showLoadPage(content){
				if(content != null && typeof content != "undefined"){
					$("#loginWait").find("#load_img").css("margin","5% 20% 0 20%");
					$("#loginWait").find("#load_content").css("display","");
					$("#loginWait").find("#load_content").html(content);
				}else{
					$("#loginWait").find("#load_img").css("margin","12% 20% 0 20%");
					$("#loginWait").find("#load_content").css("display","none");
					$("#loginWait").find("#load_content").html("");
				}
				$("#loginWait").show();
			}
			
			//完成加载页面
			function hideLoadPage(){
				$("#loginWait").hide();
				$("#loginWait").find("#load_img").css("margin","12% 20% 0 20%");
				$("#loginWait").find("#load_content").css("display","none");
				$("#loginWait").find("#load_content").html("");
			}
		</script>
		<div id="mobileLogin" class="body_content">
			<div style="position:absolute;width:100%;height:100%;top:0;display:none;z-index:100;" id="loginWait">
				<div style="position:absolute;height:100%;width:100%;top:0;">
					<div style="top:40%;height:90px;border-radius:8px;-webkit-box-shadow:1px 1px 1px #ccc;
						background:#ffffff;text-align:center;opacity:0.8;position: absolute;
						z-index: 100;left: 50%;width: 200px;margin-left: -130px;margin-top: -35px;padding: 10px 30px;">
						<img id="load_img" src="${ctx}/lib/mobile/image/load.gif" style="position:relative;">
						<p id="load_content" style="position:relative;">加载中...</p>
					</div>
				</div>
			</div>
			<div align="center" data-role="header" data-theme="b"  data-position="" id="mobileLoginHeader" style="text-align:left">
			</div>
			<div data-role="content" id="mobileLoginWrapper" style="padding:0;margin: 0px !important;" class="jszx-wrapper">
				<div id="mobileLoginScroller" class="jszx-scroller">
					<div id="mobile-login-bodybg" style="width: 100%;position: absolute;height: 100%;
						background: -webkit-gradient(linear, left top, left bottom, from(#93E3DC ), to(#42C7CF ) );">
					</div>
					
					<div id="mobileLogin_msg" class="div_content_06" style="${ errorMsg != null and errorMsg != '' ? '' : 'display: none;' };top: 250px">
						${errorMsg}</div>
					
					<div align="center" style="position: relative;top: 15%;">
						<table style="">
							<tr>
								<td>
									<div style="width:120px;height:120px;    border-radius: 50%;
    background-color: #FBE6E3;
    border: 1px;
    position: relative;text-align:center">
										<img src="${ctx}/lib/mobile/image/login-img.png" style="    width: 70%;
    top: 15%;
    position: relative;
    height: 70%;"/>
									</div>
								</td>
							</tr>
						</table>
					</div>
					<div align="center" style="position: relative;top:25%;" id="mobile-login-contentUserDiv">
						<form id="form" method="post" action="${ctx}/mobile/loginAuth.html" data-ajax="false">
						<table width="80%">
							<tr>
								<td style="height: 50px;">
									<div class="div_login_input div_input ui-body-d" style="background-image: url(${ctx}/lib/mobile/image/user_icon.png);">
										  &nbsp;|
										<input type="text" data-role="none" class="input_text" name="username" 
											id="loginName" placeholder="用户名" autocomplete="false" style="box-shadow: 0 0 0px 1000px #68D4D5 inset;background-color: #68D4D5;">
									</div>
								</td>
							</tr>
							<tr>
								<td style="height: 50px;">
									<div class="div_login_input div_input ui-body-d" style="background-image: url(${ctx}/lib/mobile/image/pwd_icon.png);">
										 &nbsp;|
										<input type="password" data-role="none" class="input_text" name="password" 
											id="userPwd" placeholder="密码" style="box-shadow: 0 0 0px 1000px #68D4D5 inset;background-color: #68D4D5;">
									</div>
								</td>
							</tr>
						</table>
						</form>
						<table width="80%">
							<tr>
								<td style="height: 55px;">
									<div class="div_login" align="center" id="mobileLoginBtn">
										<div>登&nbsp;录</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
					<div align="center" style="position: relative;top: 28%;">
						<table width="80%">
							<tr>
								<td align="left">
									<a data-role="none" class="text_style_01" id="mobileRegisterBtn"
										style="" onclick="doRegister();">注册账号</a>
								</td>
								<td align="right">
									<a data-role="none" class="text_style_01" id="mobileLosePwdBtn"
										style="">忘记密码？</a>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>